<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="back">
    <div class="backs">
      <el-row style="margin-top: 10px;margin-bottom: -10px">
        <el-col :span="3">
          <div class="fonts">维修工单</div>
        </el-col>
        <el-col :span="2" :push="18">
          <el-button v-show="deleteButton" @click="deleteByTainId">删除维修单<i class="el-icon-delete"></i></el-button>
        </el-col>
      </el-row>
      <hr class="hrst"/>
      <div class="chul">单号与接件</div>
      <hr class="hrts"/><br/>
      <el-form :model="myform" :rules="rules" ref="myform" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="退/换货类型" prop="tainType">
              <el-select v-model="myform.tainType"
                         value-key="myform.tainType"
                         @change="changeType"
                         placeholder="请选择" style="width: 100%">
                <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="退/换货单号" prop="tainNote">
              <el-select v-model="myform.tainNote"
                         value-key="myform.tainNote"
                         @change="findByOrder"
                         placeholder="请选择" style="width: 100%">
                <el-option v-for="item in typeList" :key="item.value" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="工单流水号">
              <el-input style="width: 100%" v-model="myform.tainOrder" :readonly="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="接单人" prop="tainRece">
              <el-select v-model="myform.tainRece" value-key="myform.tainRece"
                         style="width: 100%" filterable remote
                         placeholder="请选择接单人">
                <el-option v-for="e in empList" :key="e.empName" :value="e.empName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="对应客户" prop="customerByCustomId.customId">
              <el-select v-model="myform.customerByCustomId.customId"
                         value-key="myform.customerByCustomId.customId"
                         style="width: 100%" filterable remote
                         @change="customerByPerson"
                         placeholder="请选择客户">
                <el-option v-for="cus in customerList" :key="cus.customId" :label="cus.cusName" :value="cus.customId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="4">
            <el-form-item label="状态">
              <el-radio-group v-model="myform.tainState">
                <el-radio :label="1">执行中</el-radio>
                <el-radio :label="2">结束</el-radio>
                <el-radio :label="3">意外终止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="detail" label-width="120px">
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="接单日期">
              <el-date-picker
                v-model="detail.tainsDate"
                align="right"
                type="datetime"
                style="width: 100%"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="联系人">
              <el-select v-model="detail.tainsPerson"
                         value-key="detail.tainsPerson" filterable remote
                         placeholder="请选择联系人" style="width: 100%">
                <el-option v-for="link in linkList" :key="link.cupName" :value="link.cupName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="电话">
              <el-select v-model="detail.tainsPhone"
                         value-key="detail.tainsPhone" filterable remote
                         placeholder="请选择联系人电话" style="width: 100%">
                <el-option v-for="link in linkList" :key="link.cupPhone" :value="link.cupPhone"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="分类">
              <el-select v-model="detail.tainsClass" value-key="detail.tainsClass" placeholder="请选择分类" style="width: 100%">
                <el-option v-for="item in option" :key="item.label" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <hr class="hrts"/>
        <div class="chul">接件详情</div>
        <hr class="hrts"/><br/>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="保修">
              <el-radio-group v-model="detail.tainsRepair">
                <el-radio :label="1">在保</el-radio>
                <el-radio :label="2">出保</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="维修工单进度">
              <el-input style="width: 100%" v-model="detail.schedu.stateName" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="故障描述">
              <el-input
                style="width: 100%"
                type="textarea"
                autosize
                v-model="detail.tainsFault">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="注意事项">
              <el-input
                type="textarea"
                autosize
                v-model="detail.tainsAlert"
                style="width: 100%">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9" :push="2">
            <el-form-item label="接单状况">
              <el-input style="width: 100%" v-model="detail.tainsStatus"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" :push="4">
            <el-form-item label="承接部门">
              <el-select v-model="detail.tainsSection"
                         value-key="detail.tainsSection" style="width: 100%"
                         filterable remote placeholder="请选择部门">
                <el-option v-for="d in deptList" :key="d.deptName" :label="d.deptName" :value="d.deptName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :push="2">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                autosize
                style="width: 90%"
                v-model="detail.tainsRemark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <hr class="hrts"/>
        <div class="chul">产品信息</div>
        <hr class="hrts"/><br/>
        <el-row>
          <el-col>
            <el-table :data="tableDate" style="width:100%">
              <el-table-column prop="productId" label="产品编号"></el-table-column>
              <el-table-column prop="imgPath" label="产品图片">
                <template slot-scope="c">
                  <el-image
                    class="table-td-thumb"
                    :src="c.row.imgPath"
                    :preview-src-list="[c.row.imgPath]"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="产品名称"></el-table-column>
              <el-table-column prop="model" label="产品型号"></el-table-column>
              <el-table-column prop="factoryPrice" label="产品进价"></el-table-column>
              <el-table-column prop="excdNumber" label="维修数量"></el-table-column>
              <el-table-column prop="unit" label="产品单位"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-button icon="el-icon-check" @click="addTain('myform')"
                     style="margin-top: 10px;margin-left: 20px;margin-bottom: 20px"
                     v-show="keeps">保存</el-button>
        </el-row>
      </el-form>
    </div>
    <div v-show="procShow">
      <div class="bottom">
        <i class="el-icon-search"></i>
        <b>
          进入检测→客户确认→维修→交付完整过程
          <el-button class="come" @click="dialogFormVisible = true" v-show="continues">继续</el-button>
        </b>
      </div>
      <!-- 维修步骤弹框 -->
      <el-dialog title="进入检测过程" :visible.sync="dialogFormVisible" width="50%">
        <div style="color:red">
            <p>将进入：检测→客户确认→维修→交付</p>
            <p style="margin-left: 20px">检测步骤：由当前接单维修部的检测角色用户操作</p>
            <p style="margin-left: 20px">客户确认：由当前接单维修部的接单角色用户操作</p>
            <p style="margin-left: 20px">维修步骤：由当前接单维修部的维修人员角色用户操作</p>
            <p style="margin-left: 20px">交付步骤：由当前接单维修部的接单人员角色用户操作</p>
            <el-button class="puts" @click="changeState">确定</el-button>
        </div>
      </el-dialog>
      <!-- 检测完成弹框 -->
      <el-dialog title="完成检测" :visible.sync="dialogFormTwo" width="50%">
        <div style="color:red">
          <p>完成检测</p>
          <p style="margin-left: 20px">确认完成检测后：</p>
          <p style="margin-left: 20px">1.检测信息将不可修改</p>
          <p style="margin-left: 20px">2.维修工单进入下一步：客户确认</p>
          <p style="margin-left: 20px">3.维修工单进度为“待与客户确认”</p>
          <el-button class="puts" @click="changeStateTwo">确定</el-button>
        </div>
      </el-dialog>
      <div class="hide">
        <div class="work"><b>维修步骤</b></div>
        <div class="works">
          检测人员 <b>检测过程</b>
          <el-button style="margin-left: 732px;background-color: #DDDDDD;color: black" @click="dialogFormTwo = true" v-show="isDisabl">检测完成</el-button>
          <el-button style="margin-left: 40px" @click="addPros" v-show="isDisablTwo">保存</el-button>
        </div><br/>
        <el-form :model="process" label-position="right" style="margin-left: 80px" label-width="100px">
          <el-row>
            <el-col :span="22">
              <el-form-item label="检测说明">
                <el-input style="width:100%" v-model="process.prosExplain"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="预计维修天数">
                <el-input v-model="process.prosData" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :push="2">
              <el-form-item label="检测人员">
                <el-select v-model="process.prosCrew" value-key="process.prosCrew"
                           style="width: 100%" filterable remote
                           placeholder="请选择检测人员">
                  <el-option v-for="r in repairList" :key="r.empName" :value="r.empName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="检测开始日期">
                <el-date-picker
                  v-model="process.prosDate"
                  align="right"
                  type="datetime"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" :push="2">
              <el-form-item label="检测完成日期">
                <el-date-picker
                  v-model="process.prosDates"
                  align="right"
                  type="datetime"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 确认维修弹框 -->
        <el-dialog title="确认维修" :visible.sync="dialogFormThree" width="50%">
          <div style="color:red">
            <p>确认维修</p>
            <p style="margin-left: 20px">沟通确认维修后：</p>
            <p style="margin-left: 20px">1.该维修工单进入下一步：维修过程</p>
            <p style="margin-left: 20px">2.维修工单进度变为“待维修”</p>
            <el-button class="puts" @click="changeStateThree">确定</el-button>
          </div>
        </el-dialog>
        <!-- 确认不维修弹框 -->
        <el-dialog title="确认不维修" :visible.sync="dialogFormFour" width="50%">
          <div style="color:red">
            <p>确认不维修</p>
            <p style="margin-left: 20px">沟通确认不维修后：</p>
            <p style="margin-left: 20px">1.该维修工单进度变为“维修完成”</p>
            <p style="margin-left: 20px">2.接单人员将产品报损</p>
            <el-button class="puts" @click="changeStateNo">确定</el-button>
          </div>
        </el-dialog>
        <div class="works">
          接单人员 <b>维修确认</b>
          <el-button style="margin-left: 872px" @click="addInfo" v-show="isDisablThree">保存</el-button>
        </div><br/>
        <el-form :model="interflow" label-width="80px">
          <el-row>
            <el-col :span="20" :push="2">
              <el-form-item label="沟通要点">
                <el-input style="width:100%" v-model="interflow.flowGist"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9" :push="2">
              <el-form-item label="确认结果">
                <el-input style="width: 100%" v-model="interflow.flowResult"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9" :push="4">
              <el-form-item label="确认人员">
                <el-select v-model="interflow.flowCrew" value-key="interflow.flowCrew"
                           style="width: 100%" filterable remote
                           placeholder="请选择确认人员">
                  <el-option v-for="p in empList" :key="p.empName" :value="p.empName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9" :push="2">
              <el-form-item label="确认日期">
                <el-date-picker
                  v-model="interflow.flowDate"
                  align="right"
                  type="datetime"
                  style="width: 100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :push="8">
              <el-button v-show="isDisablFour" @click="dialogFormThree = true" style="background-color: #DDDDDD;color: black">确认维修</el-button>
            </el-col>
            <el-col :span="4" :push="2">
              <el-button v-show="isDisablFive" @click="dialogFormFour = true" style="background-color: #DDDDDD;color: black;margin-left: 36px">确认不维修</el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 开始维修弹框 -->
        <el-dialog title="开始维修" :visible.sync="dialogFormFive" width="50%">
          <div style="color:red">
            <p>开始维修</p>
            <p style="margin-left: 20px">开始维修后：</p>
            <p style="margin-left: 20px">1.维修工单进度变为“维修中”</p>
            <p style="margin-left: 20px">2.维修工单的维修过程数据将可以编辑</p>
            <el-button class="puts" @click="changeStateFive">确定</el-button>
          </div>
        </el-dialog>
        <!-- 维修完成弹框 -->
        <el-dialog title="维修完成" :visible.sync="dialogFormSix" width="50%">
          <div style="color:red">
            <p>确认完成维修</p>
            <p style="margin-left: 20px">确认完成维修后：</p>
            <p style="margin-left: 20px">1.维修工单进度变为“修理完成”</p>
            <p style="margin-left: 20px">2.维修产品将入库</p>
            <el-button class="puts" @click="changeStateSix">确定</el-button>
          </div>
        </el-dialog>
        <!-- 需要和维修人员沟通弹框 -->
        <el-dialog title="再次维修确认" :visible.sync="dialogFormEight" width="50%">
          <div style="color:red">
            <p>需要和维修人员沟通</p>
            <p style="margin-left: 20px">如维修人员变更维修明细，或遇到其它问题，需要与技术人员沟通确认；</p>
            <p style="margin-left: 20px">执行此步骤后，维修工单进度变成“待沟通”</p>
            <el-button class="puts" @click="changeStateFour">确定</el-button>
          </div>
        </el-dialog>
        <div class="works">
          维修人员 <b>维修过程</b>
          <el-button style="margin-left: 845px;background-color: #DDDDDD;color: black" @click="dialogFormFive = true" v-show="isDisablSix">开始维修</el-button>
          <el-button style="margin-left: 873px" @click="addCour" v-show="isDisablSeven">保存</el-button>
        </div><br/>
        <el-form :model="course" label-width="120PX">
          <el-row>
            <el-col :span="21" :push="1">
              <el-form-item label="维修备注">
                <el-input style="width:100%" v-model="course.courRemark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :push="1">
              <el-form-item label="预计完成日期">
                <el-date-picker
                  v-model="course.courDate"
                  align="right"
                  type="date"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" :push="2">
              <el-form-item label="维修人员">
                <el-select v-model="course.courCrew" value-key="course.courCrew"
                           style="width: 100%" filterable remote
                           placeholder="请选择检测人员">
                  <el-option v-for="i in repairList" :key="i.empName" :value="i.empName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :push="1">
              <el-form-item label="检测开始日期">
                <el-date-picker
                  v-model="course.courDates"
                  align="right"
                  type="datetime"
                  style="width: 100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10" :push="2">
              <el-form-item label="检测完成日期">
                <el-date-picker
                  v-model="course.courData"
                  align="right"
                  type="datetime"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :push="1">
              <el-form-item label="当前状态">
                <el-input style="width: 100%" v-model="course.courState" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3" :push="7">
              <el-button style="background-color: #DDDDDD;color: black" @click="dialogFormEight = true" v-show="isDisablNine">需要沟通</el-button>
            </el-col>
            <el-col :span="3" :push="7">
              <el-button style="background-color: #DDDDDD;color: black" @click="dialogFormSix = true" v-show="isDisablTen">维修完成</el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 沟通完毕弹框 -->
        <el-dialog title="沟通完毕" :visible.sync="dialogFormNine" width="50%">
          <div style="color:red">
            <p>沟通完毕</p>
            <p style="margin-left: 20px">如有必要，请在沟通记录中记录与维修人员沟通的过程</p>
            <p style="margin-left: 20px">点击确认后，维修工单进度变为“维修中”，维修人员可继续进行维修过程</p>
            <el-button class="puts" @click="changeStateFive">确定</el-button>
          </div>
        </el-dialog>
        <el-row>
          <el-col :span="3" :push="10">
            <el-button @click="dialogFormNine = true" style="background-color: #DDDDDD;color: black" v-show="isDisablThirteen">沟通完毕，继续维修</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AsWorkOrder",
    data() {
      return {
        myform: {
          tainId: '',
          tainType: '',
          tainNote: '',
          tainOrder:'',
          tainRece:'',
          tainState:'',
          tainDelete:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          }
        },
        detail:{
          tainsId:'',
          tainsDate:'',
          tainsClass:'',
          tainsReceipt:'',
          tainsSection:'',
          tainsRepair:'',
          tainsFault:'',
          tainsAlert:'',
          tainsPerson:'',
          tainsPhone:'',
          tainsStates:'',
          tainsStatus:'',
          tainsRemark:'',
          schedu:{
            stateId:'',
            stateName:''
          }
        },    //维修详表
        process:{
          prosId:'',
          prosData:'',
          prosExplain:'',
          prosCrew:'',
          prosDate:'',
          prosDates:''
        },    //检测表
        interflow:{
          flowId:'',
          flowGist:'',
          flowResult:'',
          flowCrew:'',
          flowDate:'',
          maintainByTainId:{
            tainId:''
          }
        },    //客户沟通表
        course:{
          courId:'',
          courRemark:'',
          courDate:'',
          courCrew:'',
          courDates:'',
          courData:'',
          courState:'',
          maintainByTainId:{
            tainId:''
          }
        },     //维修过程表
        customerList:[],  //客户列表
        deptList:[],      //部门列表
        linkList:[],      //联系人列表
        empList:[],       //员工列表
        repairList: [],   //维修员工
        typeList: [],     //退换货单号列表
        tableDate: [],    //产品信息列表
        dialogFormVisible: false,
        dialogFormTwo: false,
        dialogFormThree: false,
        dialogFormFour: false,
        dialogFormFive: false,
        dialogFormSix: false,
        dialogFormEight: false,
        dialogFormNine: false,
        keeps:false,        //维修工单保存
        continues:false,    //继续
        isDisabl:false,     //维修过程保存
        isDisablTwo:false,  //检测完成
        isDisablThree:false,//待确认保存
        isDisablFour:false, //待确认确认维修
        isDisablFive:false, //待确认确认不维修
        isDisablSix:false,  //维修过程开始维修
        isDisablSeven:false,//维修过程保存
        isDisablNine:false, //维修过程待沟通
        isDisablTen:false,  //维修过程维修完成
        /*isDisablEleven:false,//交付保存
        isDisablTwelve:false,//交付交付给客户*/
        isDisablThirteen:false,//沟通完毕继续维修
        procShow:true,      //控制显隐
        deleteButton:true,  //逻辑删除
        stateId: '',        //维修进度
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        option: [{
          value: '选项1',
          label: '产品销售'
        }, {
          value: '选项2',
          label: '服务'
        }, {
          value: '选项3',
          label: '业务合作'
        }, {
          value: '选项4',
          label: '代理分销'
        }, {
          value: '选项5',
          label: '其它'
        }],
        options: [{
          value: '选项1',
          label: '退货'
        }, {
          value: '选项2',
          label: '换货'
        }],
        rules: {
          tainType: [
            {required: true, message: '请选择退/换货类型', trigger: 'change' }
          ],
          tainNote: [
            {required: true, message: '请选择退/换货单号', trigger: 'change' }
          ],
          tainRece: [
            {required: true, message: '请选择接单人', trigger: 'change' }
          ],
          'customerByCustomId.customId': [
            {required: true, message: '请选择客户', trigger: 'change' }
          ]
        }
      }
    },
    created:function(){
      this.$axios.get("http://localhost:8088/crm/check-dept"
      ).then(v=>{
        this.deptList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/ser/check-emp"
      ).then(v=>{//员工
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/crm/repair-emp"
      ).then(v=>{//维修员工
        this.repairList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.init();
    },
    methods:{
      init(){//数据回显
        var tainIds = this.$route.query.tainId;
        if(tainIds == undefined || tainIds == ''){
          this.procShow = false;
          this.keeps = true;
          this.deleteButton = false;
          this.$axios.get("http://localhost:8088/crm/order-name"
          ).then(v => {
            this.myform.tainOrder = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
        if(tainIds > 0){
          this.procShow = true;
          this.deleteButton = true;
        }
        if(tainIds != undefined && tainIds != '') {
          this.$axios.get("http://localhost:8088/crm/check-tain",
            {params: {tainIds: tainIds}}
          ).then(v => {//维修主表
            this.myform = v.data;
            this.findByOrder();
          })

          this.$axios.get("http://localhost:8088/crm/check-main",
            {params: {tainIds: tainIds}}
          ).then(v => {//维修从表
            this.detail = v.data;
          })

          this.$axios.get("http://localhost:8088/crm/check-pros",
            {params: {tainIds: tainIds}}
          ).then(v => {//检测表
            if (v.data != '' && v.data != undefined && v.data != null) {
              this.process = v.data;
            }
          })

          this.$axios.get("http://localhost:8088/crm/check-flow",
            {params: {tainIds: tainIds}}
          ).then(v => {//客户沟通表
            if (v.data != '' && v.data != undefined && v.data != null) {
              this.interflow = v.data;
            }
          })

          this.$axios.get("http://localhost:8088/crm/check-cour",
            {params: {tainIds: tainIds}}
          ).then(v => {//维修过程表
            if (v.data != '' && v.data != undefined && v.data != null) {
              this.course = v.data;
            }
          })

          this.$axios.get("http://localhost:8088/crm/check-state",
            {params: {tainIds: tainIds}}
          ).then(v => {//通过维修主表id找出维修进度
            this.stateId = v.data;
            if(this.stateId != undefined && this.stateId != '') {
              if (this.stateId == 1) {//接件
                this.keeps = true;
                this.continues = true;
              } else {
                this.keeps = false;
                this.continues = false;
              }
              if (this.stateId == 2) {//待检测
                this.isDisabl = true;
                this.isDisablTwo = true;
              } else {
                this.isDisabl = false;
                this.isDisablTwo = false;
              }
              if (this.stateId == 3) {//待确认
                this.isDisablThree = true;
                this.isDisablFour = true;
                this.isDisablFive = true;
              } else {
                this.isDisablThree = false;
                this.isDisablFour = false;
                this.isDisablFive = false;
              }
              if (this.stateId == 4) {//待维修
                this.isDisablSix = true;
              } else {
                this.isDisablSix = false;
              }
              if (this.stateId == 5) {//维修中
                this.isDisablSeven = true;
                this.isDisablNine= true;
                this.isDisablTen = true;
              } else {
                this.isDisablSeven = false;
                this.isDisablNine= false;
                this.isDisablTen = false;
              }
              if(this.stateId == 6){//待沟通
                this.isDisablThirteen = true;
              }else {
                this.isDisablThirteen = false;
              }
              /*if (this.stateId == 7) {//维修完成
                this.isDisablEleven = true;
                this.isDisablTwelve = true;
              } else {
                this.isDisablEleven = false;
                this.isDisablTwelve = false;
              }*/
            }
          })
        }
      },
      addTain(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("http://localhost:8088/crm/save-tain",{
              tainId:this.myform.tainId,
              tainType:this.myform.tainType,
              tainNote:this.myform.tainNote,
              tainOrder:this.myform.tainOrder,
              tainRece:this.myform.tainRece,
              tainState:this.myform.tainState,
              tainDelete:this.myform.tainDelete,
              customerByCustomId:this.myform.customerByCustomId,
              tainsId:this.detail.tainsId,
              tainsDate:this.detail.tainsDate,
              tainsClass:this.detail.tainsClass,
              tainsReceipt:this.detail.tainsReceipt,
              tainsSection:this.detail.tainsSection,
              tainsRepair:this.detail.tainsRepair,
              tainsFault:this.detail.tainsFault,
              tainsAlert:this.detail.tainsAlert,
              tainsPerson:this.detail.tainsPerson,
              tainsPhone:this.detail.tainsPhone,
              tainsStates:this.detail.tainsStates,
              tainsStatus:this.detail.tainsStatus,
              tainsRemark:this.detail.tainsRemark,
              schedu:this.detail.schedu,
            }).then(()=>{
              this.$message.success("新增成功");
              this.$router.push({
                path:'/tain'
              })
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      changeType(){//根据退换货类型查出单号
        var type = this.myform.tainType;
        if(type != undefined && type != ''){
          this.$axios.get("http://localhost:8088/crm/check-type",
            {params:{tainType:type}}
          ).then(v=>{
            this.typeList = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
      },
      findByOrder(){//根据退换货单号查出产品信息
        var type = this.myform.tainType;
        let tainNote = this.myform.tainNote;
        if(type != '' && type != undefined && tainNote != '' && tainNote != undefined){
          this.$axios.get("http://localhost:8088/crm/product-id",
            {params:{tainType:type, tainNote:tainNote}}
          ).then(v=>{
            this.tableDate = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })

          this.$axios.get("http://localhost:8088/crm/customer-id",
            {params:{tainType:type, tainNote:tainNote}}
          ).then(v=>{
            this.customerList = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
      },
      customerByPerson(){//根据客户查出联系人
        var person = this.myform.customerByCustomId.customId;
        if(person != undefined && person != ''){
          this.$axios.get("http://localhost:8088/crm/check-link",
            {params:{person:person}}
          ).then(v=>{
            this.linkList = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
      },
      changeState(){//将维修进度修改为待检测
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-state",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormVisible = false;
          this.init();
        })
      },
      changeStateTwo(){//将维修进度修改为待确认
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-two",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormTwo = false;
          this.init();
        })
      },
      changeStateThree(){//将维修进度修改为待维修
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-three",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormThree = false;
          this.init();
        })
      },
      changeStateNo(){//确认不维修
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-no",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormFour = false;
          this.init();
        })
      },
      changeStateFour(){//将维修进度修改为待沟通
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-four",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormEight = false;
          this.init();
        })
      },
      changeStateFive(){//将维修进度修改为维修中
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-five",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormFive = false;
          this.dialogFormNine = false;
          this.init();
        })
      },
      changeStateSix(){//将维修进度修改为维修完成
        var tainId = this.$route.query.tainId;
        this.$axios.get("http://localhost:8088/crm/update-six",
          {params:{tainId:tainId}}
        ).then(v=>{
          this.dialogFormSix = false;
          this.init();
        })
      },
      addPros(){//新增检测表
        var tainId = this.$route.query.tainId;
        this.$axios.post("http://localhost:8088/crm/save-pros",{
          prosId:this.process.prosId,
          prosData:this.process.prosData,
          prosExplain:this.process.prosExplain,
          prosCrew:this.process.prosCrew,
          prosDate:this.process.prosDate,
          prosDates:this.process.prosDates,
          tainId:this.myform.tainId
        }).then(()=>{
          this.$message.success("新增成功");
          this.init();
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      addInfo(){//新增客户沟通表
        this.$axios.post("http://localhost:8088/crm/save-info",{
          flowId:this.interflow.flowId,
          flowGist:this.interflow.flowGist,
          flowResult:this.interflow.flowResult,
          flowCrew:this.interflow.flowCrew,
          flowDate:this.interflow.flowDate,
          maintainByTainId:this.myform
        }).then(()=>{
          this.$message.success("新增成功");
          this.init();
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      addCour(){//新增维修过程表
        this.$axios.post("http://localhost:8088/crm/save-cour",{
            courId:this.course.courId,
            courRemark:this.course.courRemark,
            courDate:this.course.courDate,
            courCrew:this.course.courCrew,
            courDates:this.course.courDates,
            courData:this.course.courData,
            courState:this.course.courState,
            maintainByTainId:this.myform
        }).then(()=>{
          this.$message.success("新增成功");
          this.init();
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      deleteByTainId(){//删除维修工单
        var tainId = this.$route.query.tainId;
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8088/crm/delete-tain",
            {params: {tainId:tainId}}
          ).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新数据
            this.$router.push({
              path:'/tain'
            })
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      clear(){//清空缓存
        this.myform = {
          tainId: '',
          tainType: '',
          tainNote: '',
          tainOrder:'',
          tainRece:'',
          tainState:'',
          tainDelete:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          }
        };
        this.detail = {
          tainsId:'',
          tainsDate:'',
          tainsClass:'',
          tainsReceipt:'',
          tainsSection:'',
          tainsRepair:'',
          tainsFault:'',
          tainsAlert:'',
          tainsPerson:'',
          tainsPhone:'',
          tainsStates:'',
          tainsStatus:'',
          tainsRemark:'',
          schedu:{
            stateId:'',
            stateName:''
          }
        };    //维修详表
        this.process = {
          prosId:'',
          prosData:'',
          prosExplain:'',
          prosCrew:'',
          prosDate:'',
          prosDates:''
        };    //检测表
        this.interflow = {
          flowId:'',
          flowGist:'',
          flowResult:'',
          flowCrew:'',
          flowDate:'',
          maintainByTainId:{
              tainId:''
          }
        };    //客户沟通表
        this.course = {
          courId:'',
          courRemark:'',
          courDate:'',
          courCrew:'',
          courDates:'',
          courData:'',
          courState:'',
          maintainByTainId:{
            tainId:''
          }
        };     //维修过程表
        this.stateId = '';
        this.customerList = [];
        this.deptList = [];
        this.linkList = [];
        this.typeList = [];
        this.tableDate = [];
      }
    },
    watch:{
      $route(){//跳转到该页面后需要进行的操作
        this.clear();
        this.init();
      }
    }
  }
</script>

<style scoped>
  .back{
    border: 1px solid #F4F8FB;
    width: 98%;
    background: #F4F8FB;
  }
  .backs{
    border: 1px solid white;
    width: 96%;
    background: white;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .fonts{
    font-size: 18px;
    margin-top: 5px;
    margin-left: 15px;
  }
  .hrst{
    width: 97%;
    border-top: 1px solid #aaaaaa;
    margin-left: 20px;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
  }
  .chul{
    margin-left: 10px;
    font-size: 14px;
  }
  .hrts{
    width: 96%;
    border-top: 1px solid #EEEEEE;
    margin-left: 20px;
  }
  .bottom{
    font-size: 12px;
    margin-top: 20px;
    margin-left: 480px;
  }
  .hide{
    border: 1px solid white;
    width: 96%;
    height: 860px;
    background: white;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .work{
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .works{
    font-size: 12px;
    margin-top: 20px;
    margin-left: 10px;
  }
  .come{
    width: 36px;
    height: 19px;
    font-size: 12px;
    color: #000000;
    background-color: #dddddd !important;
    border: 1px solid #dddddd !important;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
  }
  .puts{
    margin-top: 20px;
    margin-left: 270px;
    background-color: #DDDDDD;
    color: black;
  }
  .table-td-thumb{
    width: 160px;
    height: 100px;
  }
</style>
